<template>
  <main class="setting" :style="themeStyle">
    <r-header class="setting__header" :main-el="resumeEl" />
    <r-aside class="setting__menu" />
    <section class="setting__content">
      <div
        class="setting__content__resume"
        ref="resumeEl"
        :style="{ transform: `scale(${curScale})` }"
      >
        <r-container
          :key="`${curTemplate}-${id}`"
          :style="containerInfo.baseStyle"
          v-bind="containerInfo"
          v-for="(containerInfo, id) in containerList"
        />
      </div>
      <teleport to="#app">
        <div class="setting__content__resize">
          <i class="resume resume-minus" @click="curScale -= 0.1" />
          <span>{{ parseInt(curScale * 100) }}%</span>
          <i class="resume resume-plus_brief" @click="curScale += 0.1" />
        </div>
      </teleport>
    </section>
  </main>
</template>

<script>
// @ is an alias to /src
import jsonData from "../api/data/data.json";
import RHeader from "@/components/r-header";
import RAside from "@/components/r-aside";
import RContainer from "@/components/r-container";
import { initData } from "@/components/r-container/components/useData";
import { ref, reactive, toRefs, provide, computed } from "vue";

const genContainerList = (template = "second") => {
  let storePath = localStorage.getItem(`compPath-${template}`);
  if (storePath) {
    storePath = JSON.parse(storePath);
  } else {
    storePath = require(`../api/template/${template}/comp-path.json`);
  }
  const containerInfo = require(`../api/template/${template}/container-info.json`);
  return storePath.reduce((containerAcc, { id, type, name, containerId }) => {
    const container = containerInfo[containerId];
    const compList = container.compList || (container.compList = []);
    compList.push({ id, type, name });
    return containerAcc;
  }, containerInfo);
};

export default {
  name: "Home",
  components: {
    RHeader,
    RAside,
    RContainer,
  },
  setup() {
    const curScale = ref(1);
    const resumeEl = ref(null);
    const state = reactive({
      curTemplate: "",
      containerList: [],
      globalStyle: {},
    });
    initData(jsonData);
    const onChangeTemplate = (template) => {
      Object.assign(state, {
        curTemplate: template,
        containerList: genContainerList(template),
        globalStyle: require(`../api/template/${template}/global-style.json`),
      });
    };
    onChangeTemplate("test");
    provide("globalStyle", state.globalStyle);
    provide("containerList", state.containerList);
    const themeStyle = computed(() => {
      return Object.entries(state.globalStyle).reduce((res, [key, item]) => {
        return { ...res, [key]: item.value };
      }, {});
    });
    return {
      ...toRefs(state),
      resumeEl,
      curScale,
      themeStyle,
      onChangeTemplate,
    };
  },
};
</script>
<style scoped lang="less">
.setting {
  width: 100vw;
  height: 100vh;
  display: grid;
  overflow: hidden;
  grid-template-columns: 140px auto;
  grid-template-rows: 40px auto;
  &__header {
    grid-column: span 2;
  }
  &__content {
    position: relative;
    display: grid;
    place-items: center;
    overflow: auto;
    height: 100%;
    width: 100%;
    &::-webkit-scrollbar {
      width: 11px !important;
      height: 11px !important;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background-color: #ccc;
    }
    &__resume {
      transform-origin: center top;
      background-color: white;
      height: 1160px;
      width: 820px;
      margin: 50px 0;
      box-shadow: 0 10px 10px -5px darkgrey;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 200px;
    }

    &__resize {
      position: absolute;
      right: 20px;
      bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 70px;
      height: 20px;
      padding: 0 5px;
      background-color: white;
      border-radius: 10px;
      opacity: 0.5;
      transition: opacity 0.2s linear;
      z-index: 90;
      &:hover {
        opacity: 1;
      }

      i {
        cursor: pointer;
        font-size: 12px;
      }
    }
  }
}
</style>
